/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, TextArea, LineColumn, InputLine, SuffixInput,CCell, Table, TableBody, TableRow, TableHead, Cell, useTheme,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, SelectHookfork, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {arraySetInp, calcAverageArrObj,} from "../../../common/tool";
import {RepLink} from "../../common/base";

interface Props  extends InternalItemProps{
    config: any[];
    unit?: any
}
export const itemA制动距离=['制距备注'];
export const Braking =
    React.forwardRef((
        {children, show, alone = true, refWidth,label,config,unit='mm'}: Props, ref
    ) => {
        const itemA = React.useMemo(() => {
            let items: string[]=[];
            config.forEach(([name,title], i:number)=>{
                items.push(name+'',  name+'r');
            });
            return [...items, ...itemA制动距离];
        }, [config]);
        const [getInpFilter]=useMeasureInpFilter(null,itemA,);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}</Text>
                { config.map(([name,title], i:number) => {
                    return<React.Fragment key={i}>项目{i+1} {'>'} {title}：
                        <LineColumn>
                            { (new Array(3)).fill(null).map(( _,  w:number) => {
                                return <InputLine key={w} label={`次数${w+1}，制动距离：`}>
                                    <SuffixInput  value={inp?.[name]?.[w] ||''} onSave={txt=>arraySetInp(name,w,txt,inp,setInp)}>{unit}</SuffixInput>
                                </InputLine>;
                            }) }
                            <InputLine  label='平均制动距离：'>
                                <Text>{calcAverageArrObj(inp?.[name],a=>a,2,3)}{unit}</Text>
                            </InputLine>
                            <InputLine label={title+'-检验结果'}>
                                <SelectHookfork value={ inp?.[name+'r'] ||''}
                                                onChange={e => setInp({ ...inp, [name+'r']: e.currentTarget.value||undefined}) }/>
                            </InputLine>
                        </LineColumn>
                    </React.Fragment>;
                }) }
                备注：
                <TextArea  value={inp?.制距备注 ||''} rows={3}
                           onChange={e => setInp({ ...inp, 制距备注: e.currentTarget.value||undefined}) } />
                {children}
            </InspectRecordLayout>
        );
} );


export const BrakingVw= ({children, orc, rep,label,config, unit='mm'} :
    { orc: any, rep: any,label:any, children?: any,config:any[],unit?:any}
) => {
    const theme = useTheme();
    return <>
        <div css={{display:'block',justifyContent:'space-between',alignItems:'flex-end', [theme.mediaQueries.md]: {display:'flex'},
                           "@media print": {paddingBottom: '5rem', pageBreakInside: 'avoid'}, }}>
            { typeof label==='object' ?  <>{label}</>
                :
                <Text variant="h4" css={{marginTop: '1rem',
                }}>{label}</Text>
            }
            <Text css={{display: 'flex',flexDirection: 'row-reverse',marginRight: '2rem'
            }}>单位：{unit}</Text>
        </div>
        <Table id={'Braking'} fixed={ ["6%","%","11%","19%","16%","12%"] }
                      css={ {borderCollapse: 'collapse', "@media print": {marginTop: '-5rem'}} } tight  miniw={800} >
            <TableHead>
                <TableRow>
                    <CCell colSpan={2}>项目</CCell>
                    <CCell>次数</CCell>
                    <CCell>制动距离</CCell>
                    <CCell>平均制动距离</CCell>
                    <CCell>检验结果</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink ori rep={rep} tag={'Braking'}>
                    { config.map(([name,title], i:number) => {
                        const avdistance=calcAverageArrObj(orc?.[name],(row)=>row,2,3);
                        return  <React.Fragment key={i}>
                            { (new Array(3)).fill(null).map(( _,  w:number) => {
                                return <TableRow key={w}>
                                    {w===0 && <CCell rowSpan={3} colSpan={2}>{title}</CCell>}
                                    <CCell>{w+1}</CCell>
                                    <CCell>{orc?.[name]?.[w]}</CCell>
                                    { w===0 && <>
                                        <CCell rowSpan={3}>{avdistance}</CCell>
                                        <CCell rowSpan={3}>{orc?.[name+'r']}</CCell>
                                    </>
                                    }
                                </TableRow>;
                            }) }
                        </React.Fragment>;
                    }) }
                    <TableRow>
                        <CCell>备注</CCell>
                        <Cell colSpan={5}><div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                            {orc.制距备注 || '／'}
                        </div></Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        {children}
    </>;
};
